<!--
 * @Author: licongwei
 * @Date: 2022-03-15 15:17:47
 * @FileDescription:Cpi
-->
<template>
  <com-box :title="data.title">
    <div class="con">
      <div class="box">
        <div class="box-left">
          <div class="left-title">指数列表</div>
          <div class="radio">
            <el-radio-group
              v-model="data.zsRadio"
              class="ml-4 radio-container"
              @change="handRadioChange"
            >
              <el-radio
                v-for="(item, index) in data.options"
                :key="index"
                :label="item.id"
                :class="['radio-item', data.zsRadio == item.id ? 'active' : '']"
              >
                {{ item.priceIndexName }}</el-radio
              >
            </el-radio-group>
            <div class="pian">
              <div class="jiantou" :style="{ top: handTranTop() }"></div>
              <div class="pian-box">
                <el-checkbox-group
                  v-model="data.zsCheck"
                  class="check-contain"
                  text-color="#cde9ff"
                  fill="#0190d4"
                  @change="handriChange"
                >
                  <el-checkbox
                    v-for="item in data.checkList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.id"
                    :class="[
                      'check-item',
                      data.zsCheck.indexOf(item.id) > -1 ? 'active' : ''
                    ]"
                    >{{ item.priceIndexName }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </div>
        </div>
        <div class="box-right">
          <div>
            <el-radio-group
              v-model="data.radio"
              class="checkbox-contain"
              text-color="#cde9ff"
              fill="#0190d4"
              @change="handleChange"
            >
              <el-radio
                v-for="item in data.radioList"
                :key="item.value"
                :value="item.value"
                :label="item.value"
                size="large"
                :class="[
                  'check-item',
                  data.radio == item.value ? 'active' : ''
                ]"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </div>
          <div class="box-date">
            <div class="box-date-input">
              <div class="box-date-item">
                <div class="box-date-label">指数起止时间：</div>
                <el-date-picker
                  v-model="data.dateStart"
                  type="date"
                  placeholder="开始日期"
                  value-format="YYYY-MM-DD"
                  @change="changeDate"
                />
              </div>
              <div class="box-date-item">
                <div class="box-date-label">指数截止时间：</div>
                <el-date-picker
                  v-model="data.dateEnd"
                  type="date"
                  placeholder="结束日期"
                  value-format="YYYY-MM-DD"
                  @change="changeDate"
                />
              </div>
            </div>
          </div>
          <div class="query-btn" @click="handQuery">
            <div>查询</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <el-tag
          size="large"
          v-for="(tag, index) in data.tags"
          :key="index"
          closable
          type="primary"
          @close="closeTag(tag)"
        >
          {{ tag.name }}
        </el-tag>
      </div>
    </div>
  </com-box>
</template>
<script lang="ts" setup>
import { reactive, defineEmits } from 'vue'
import httpRequest from '@/service'
import comBox from '@/components/comBox/comBox.vue'
import { getDefaultDate } from '@/utils/date'
import { getZSDate, setZSDate } from '@/utils/auth'
import {
  ElRadio,
  ElRadioGroup,
  ElCheckbox,
  ElCheckboxGroup,
  ElTag
} from 'element-plus'
// 折线图
const emits = defineEmits(['change'])
const data: any = reactive({
  options: [],
  zsRadio: '',
  checkList: [],
  zsCheck: [],
  radioList: [
    { label: '月', value: 'month' },
    { label: '周', value: 'week' },
    { label: '日', value: 'day' }
  ],
  radio: 'month',
  dateStart: getDefaultDate(0)[0],
  dateEnd: getDefaultDate(0)[1],
  tags: [],
  title: '',
  isGroup: false,
  params: {
    height: '368px',
    loading: true,
    map: {},
    options: {
      dataset: {
        dimensions: [],
        source: []
      },
      title: {
        show: true,
        text: '',
        left: '20',
        top: '10',
        textStyle: {
          fontSize: 18,
          fontFamily: 'Microsoft YaHei',
          color: 'rgba(162, 199, 255,1)'
        }
      },
      legend: {
        right: 0,
        top: 15,
        width: '70%'
      },
      // 待完善：此处如果注释会导致添加不上axisLabel->fontSize的chartFontSize，因为递归合并时直接赋值xAxis全局配置了
      xAxis: [
        {
          axisLabel: {
            formatter: function (value: string) {
              const srt = value.split('-')
              return srt[0] + '-' + srt[1]
            }
          }
        }
      ],
      yAxis: [
        {
          name: ['', ''],
          position: ['left', ''],
          splitLine: {
            show: false
          }
        }
      ],
      grid: {
        top: 80,
        bottom: 37
      },
      // backgroundColor: '#082f7e',
      dataZoom: [
        {
          show: true,
          type: 'slider',
          start: 0,
          end: 100,
          width: '80%',
          height: 15,
          left: '10%',
          bottom: '13',
          borderColor: '#166beb',
          handleStyle: {
            color: '#166beb',
            borderColor: '#166beb',
            borderWidth: 4
          },
          moveHandleSize: 10,
          moveHandleStyle: {
            color: '#166beb'
          },
          textStyle: {
            color: '#00c6ff'
          },
          emphasis: {
            handleStyle: {
              color: '#00c6ff',
              borderColor: '#00c6ff',
              borderWidth: 4
            },
            moveHandleStyle: {
              color: '#00c6ff'
            }
          }
        }
      ],
      series: [
        {
          type: ['line', 'line', 'line', 'line', 'line'],
          label: {
            show: false
          },
          symbolSize: 7, //折线点的大小
          smooth: true,
          connectNulls: true,
          itemStyle: {
            color: ['#5dec9d', '#ea68a2', '#1da7ff', '#ec6941', '#ffba0a']
          },
          areaStyle: {
            opacity: 0
          }
          // markPoint: {
          //   label: {
          //     show: true,
          //     color: '#fff'
          //   },
          //   data: [
          //     {
          //       type: 'max'
          //     },
          //     {
          //       type: 'min'
          //     },
          //     {
          //       type: 'average'
          //     }
          //   ]
          // }
        }
      ]
    },
    event: {
      customEvent: (chartInstance: any) => {
        chartInstance.group = 'group1'
        data.isGroup = true
      }
    }
  },
  getData: () => {
    data.params.loading = true
    httpRequest
      // .get({ url: 'M5CPILine', params: { dataType: data.radio } })
      .get({
        url: 'M5PeopleLivelihoodPriceIndex',
        params: { dataType: data.radio }
      })
      .then((res) => {
        if (res.code === 200 && Object.keys(res.map).length > 0) {
          data.params.map = res.map
          if (res.min) {
            data.params.options.yAxis[0].min = res.min
          }
          if (res.max) {
            data.params.options.yAxis[0].max = res.max
          }
          data.params.options.dataset.dimensions = [
            'name',
            ...Object.keys(res.map)
          ]
          res.data.forEach((i: { value1: string | number }) => {
            if (i.value1 == 0) {
              i.value1 = ''
            }
          })
          data.params.options.dataset.source = res.data
          data.title = res.title
          data.params.loading = false
        }
      })
      .catch(() => {
        console.log('请求失败')
      })
  },
  getDate: () => {
    const date = getZSDate()
    if (date) {
      data.dateStart = JSON.parse(date)[0]
      data.dateEnd = JSON.parse(date)[1]
    } else {
      const arr = [data.dateStart, data.dateEnd]
      setZSDate(JSON.stringify(arr))
    }
  },
  getRadio: () => {
    data.options = []
    httpRequest
      .get({
        url: 'M5ZSList'
      })
      .then((res) => {
        res.data.forEach((i: { data: { children: any }; child: any }) => {
          if (i.data) {
            data.options.push(i.data)
            i.data.children = i.child
          }
        })
        data.zsRadio = data.options[0].id
        data.checkList = data.options[0].children
        data.zsCheck.push(data.checkList[0].id)
        data.tags = [
          {
            name: data.checkList[0].priceIndexName,
            id: data.checkList[0].id
          }
        ]
        handQuery()
      })
      .catch(() => {
        console.log('请求失败')
      })
  }
})
data.getDate()
data.getRadio()
const changeDate = () => {
  const arr = [data.dateStart, data.dateEnd]
  setZSDate(JSON.stringify(arr))
}
const handTranTop = () => {
  let top = ''
  data.options.forEach((i: { value: any }, j: any) => {
    if (i.id == data.zsRadio) {
      top = j * 50 + 'px'
    }
  })
  return top
}
const handleChange = () => {
  // if (data.radio.length > 1) {
  //   data.radio.splice(0, 1)
  // }
}
const handriChange = () => {
  data.tags = []
  let tagNameList: string | any[] = []
  data.zsCheck.forEach((i: any) => {
    data.options.forEach(
      (j: { children: any[]; priceIndexName: any; id: any }) => {
        j.children.forEach((c: { id: any; priceIndexName: any }) => {
          if (c.id == i && !(tagNameList.indexOf(c.priceIndexName) > -1)) {
            data.tags.push({
              id: c.id,
              name: c.priceIndexName
            })
          }
          tagNameList = data.tags.map((item: { name: any }) => {
            return item.name
          })
        })
      }
    )
  })
}
const handRadioChange = (value: any) => {
  data.options.forEach((i: { id: any; children: any }) => {
    if (i.id == value) {
      data.checkList = i.children
    }
  })
}
const closeTag = (tag: { name: any; id: any }) => {
  data.tags.forEach((i: { id: any }, j: any) => {
    if (i.id == tag.id) {
      // data.tags.splice(data.tags.indexOf(tag.name), 1)
      data.tags.splice(j, 1)
    }
  })
  data.zsCheck.forEach((item: any, index: any) => {
    if (item == tag.id) {
      data.zsCheck.splice(index, 1)
    }
  })
  // data.options.forEach((i: { id: any; children: any[] }) => {
  //   if (tag.id == i.id) {
  //     let list = i.children.map((item: { id: any }) => {
  //       return item.id
  //     })
  //     list.forEach((j) => {
  //       const index = data.zsCheck.indexOf(j)
  //       if (index !== -1) {
  //         data.zsCheck.splice(index, 1)
  //       }
  //     })
  //   }
  // })
}
const handQuery = () => {
  emits('change', data.zsCheck, data.radio)
}
</script>
<style lang="less" scoped>
.con {
  height: 100%;
  .bottom {
    height: 20%;
    padding: 20px 50px;
    ::v-deep(.el-tag--large) {
      background-color: rgb(6, 83, 132);
      color: #fff;
      border-color: rgb(6, 83, 132);
      margin-right: 20px;
      font-size: 16px;
      height: 40px;
    }
  }
}
.box {
  height: 80%;
  width: 100%;
  // padding: 20px;
  display: flex;
  justify-content: space-between;
  padding-top: 50px;
  .query-btn {
    position: absolute;
    top: 34%;
    right: 12%;
    width: 105px;
    height: 86px;
    border-color: rgb(2, 244, 255);
    background-color: rgb(22, 188, 214);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    text-align: center;
    line-height: 86px;
    color: rgb(254, 255, 255);
    font-size: 18px;
    font-family: 'Benmo';
    cursor: pointer;
    font-weight: bold;
  }
  .box-date-input {
    display: flex;
    flex-direction: column;
    .box-date-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 10px;
      margin-top: 32px;
      .box-date-label {
        width: 27%;
        font-size: 18px;
        font-weight: bold;
        font-family: 'Microsoft YaHei';
        color: rgb(101, 234, 255);
        text-align: right;
      }
      ::v-deep(.el-input__wrapper) {
        background-color: transparent;
        font-size: 19px;
      }
      ::v-deep(.el-input) {
        font-size: 17px;
        --el-input-border-radius: 5px;
        --el-input-hover-border: rgb(33, 122, 255);
        --el-input-text-color: rgba(183, 207, 255, 0.6);
        --el-input-hover-border-color: rgb(33, 122, 255);
        --el-input-placeholder-color: rgba(183, 207, 255, 0.6);
        --el-input-clear-hover-color: rgb(33, 122, 255);
        .el-input__inner {
          padding-left: 42px;
          border: 1px solid #1961cb;
          border-radius: 5px;
          color: rgb(101, 234, 255);
          font-size: 18px;
          font-family: 'Benmo';
          font-weight: bold;
        }
        ::placeholder {
          font-size: 14px;
        }
      }
    }
  }
  .left-title {
    font-size: 23px;
    color: rgb(16, 255, 247);
    padding: 0 10px 0 55px;
    margin-bottom: 15px;
    font-weight: bold;
    position: relative;
  }
  .left-title::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 5px;
    width: 6px;
    height: 25px;
    background-color: rgb(16, 255, 247);
  }
  .radio {
    display: flex;
    width: 100%;
    .pian {
      width: 50%;
      padding: 0 15px;
      position: relative;
      display: flex;
      justify-content: flex-end;
      .jiantou {
        position: absolute;
        width: 31px;
        height: 36px;
        left: 32px;
        background-image: url(../img/jiantou.png);
        background-repeat: no-repeat;
      }
      .pian-box {
        width: 234px;
        height: 294px;
        background-image: url(../img/check.png);
        ::v-deep(.el-checkbox) {
          margin-bottom: 20px;
        }
      }
    }
  }
  .check-contain {
    display: flex;
    flex-direction: column;
    padding: 20px 0px 20px 35px;
    // justify-content: space-between;
    height: 100%;
    .active {
      color: #cde9ff;
    }
    ::v-deep(.el-checkbox .is-checked .el-checkbox__inner::after) {
      border: 2px solid #37c6fe !important;
      color: #79caff;
      background: #0190d4;
    }
    ::v-deep(.el-checkbox .el-checkbox__input .el-checkbox__inner::after) {
      // transform: rotate(180deg) translateX(2px) scaleX(1.5) scaleY(1.5) !important;
      border: none;
    }
    ::v-deep(.el-checkbox__inner::after) {
      width: 5px;
      height: 5px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) !important;
    }
    ::v-deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
      color: #cde9ff;
    }
  }
  .checkbox-contain {
    padding: 20px 0px 20px 35px;
    justify-content: space-between;
    height: 100%;
    .active {
      color: #cde9ff;
    }
    ::v-deep(.el-radio .is-checked .el-radio__inner::after) {
      // border: 2px solid #37c6fe !important;
      color: #79caff;
      background: #0190d4;
    }
    ::v-deep(.el-checkbox .el-checkbox__input .el-checkbox__inner::after) {
      transform: rotate(180deg) translateX(2px) scaleX(1.5) scaleY(1.5) !important;
      border: none;
    }
    ::v-deep(.el-checkbox__inner::after) {
      width: 2px;
      height: 2px;
      left: 7.5px;
      top: 5px;
    }
    ::v-deep(.el-radio) {
      color: #cde9ff;
      margin-right: 75px;
    }
    ::v-deep(.el-radio__label) {
      color: #50a2ef;
      font-size: 23px;
      font-weight: bold;
    }
    &::v-deep(.el-radio) {
      --el-radio-input-bg-color: transparent;
      --el-radio-input-border: 2px solid #194998;
      .el-radio__input.is-checked .el-radio__inner {
        background-color: transparent;
      }
      .el-radio__input.is-checked .el-radio__inner::after {
        transform: translate(-50%, -50%) scale(1.4);
        background-color: #0191d5;
      }
      .el-radio__inner::after {
        width: 5px;
        height: 5px;
      }
      .el-radio__input.is-checked + .el-radio__label {
        color: #cde9ff;
      }
    }
  }
  .radio-container {
    display: flex;
    flex-direction: column;
    padding: 0 10px 0 35px;
    width: 50%;
    .active {
      color: rgb(255, 255, 255);
      background-image: url(../img/radio-active.png);
    }
    ::v-deep(.el-radio:last-child) {
      margin-right: 31px;
    }
    &::v-deep(.el-radio) {
      --el-radio-input-bg-color: transparent;
      --el-radio-input-border: 2px solid #194998;
      .el-radio__input.is-checked .el-radio__inner {
        background-color: transparent;
      }
      .el-radio__input.is-checked .el-radio__inner::after {
        transform: translate(-50%, -50%) scale(1.4);
        background-color: #0191d5;
      }
      .el-radio__inner::after {
        width: 5px;
        height: 5px;
      }
      .el-radio__input.is-checked + .el-radio__label {
        color: rgb(255, 255, 255);
      }
    }
  }
  .radio-item {
    margin-bottom: 10px; /* 控制间距 */
    font-size: 18px;
    font-family: 'Benmo';
    color: rgb(108, 242, 250);
    line-height: 38px;
    text-align: left;
    background-image: url(../img/radio.png);
    background-size: cover;
    height: 38px;
    width: 293px;
    border-radius: 7px;
    display: flex;
    justify-content: flex-end;
    ::v-deep(.el-radio__label) {
      width: 190px;
      font-size: 18px;
      font-weight: bold;
    }
    // label {
    //   width: 190px;
    //   padding: 0 20px;
    //   text-align: left;
    // }
    // input {
    //   width: 20px;
    // }
  }
  &-left {
    width: 50%;
    &-data {
      display: flex;
      justify-content: space-between;
      padding: 0px 10px 0px 35px;
      p {
        width: 24%;
        height: 49px;
        background-color: rgba(10, 57, 151, 0.6);
        box-shadow: inset 0px 0px 15.52px 0.48px rgba(39, 115, 230, 0.5);
        font-size: 15px;
        font-family: 'AliHYAiHei';
        color: rgb(20, 236, 249);
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(10, 57, 151, 0.6) url('../img/border.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    &-ber {
      height: calc(100% - 50px);
      padding-left: 35px;
    }
  }
  &-right {
    flex: 1;
    padding: 20px;
    height: 100%;
    position: relative;
    &-chart {
      width: 100%;
      height: 100%;
    }
    &-radio {
      z-index: 10;
      position: absolute;
    }
    &::v-deep(.el-radio) {
      --el-radio-input-bg-color: transparent;
      --el-radio-input-border: 2px solid #194998;
      .el-radio__input.is-checked .el-radio__inner {
        background-color: transparent;
      }
      .el-radio__input.is-checked .el-radio__inner::after {
        // transform: translate(-50%, -50%) scale(1.4);
        background-color: #00ffff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.4) !important;
      }
    }
    &::v-deep(.el-radio__label) {
      color: rgb(80, 162, 239);
      font-size: 15px;
    }
  }
}
</style>
